<template>
  <ul class="list">
    <li class="item" v-for="item in $store.state.cartList">
      <div class="data">
        <i class="check" :class="{active:item.isChecked}" @click="check(item)" ></i>
        <img :src="item.picture" @click="itemClick(item.id)" />
        <div class="desc">
          <span class="name">{{ item.name }}</span>
          <span class="price">{{ "¥" + item.price }}</span>
          <van-stepper  @plus="addCount(item)" @minus="subCount(item)"
          @overlimit="overlimit" class="selnum" button-size="22px" input-width="29px" />
        </div>
      </div>
    </li>
  </ul>
</template>
<script>
export default {
  name: "CartGood",
  methods: {
    check(item) {
      this.$store.dispatch('changeIsChecked',item);
    },
    addCount(item) {
      this.$store.commit('addCount',item);
      this.$store.commit('sumPrice');
    },
    subCount(item) {
      this.$store.commit('subCount',item);
      this.$store.commit('sumPrice');
    },
    overlimit() {
      this.$toast('本商品1件起售');
    },
    itemClick(id) {
      this.$router.push('/detail/'+id)
    }
  }
};
</script>
<style scoped>
.list {
  margin-bottom: 220px;
}
.item {
  /* position: relative; */
  padding-left: 43px;
  width: 100%;
  height: 115px;
  margin-bottom: 10px;
  background-color: #fff;
  z-index: 1;
  /* text-align: center; */
}
.item .data {
    position: relative;
    padding: 12px 15px 0 0;
    font-size: 14px;
}
.item .check {
  position: absolute;
  display: inline-block;
  width: 19px;
  height: 19px;
  left: -28px;
  top: 46px;
  background-image: url(~assets/images/cart/checkbox.webp);
  background-size: 19px 286.5px;
  background-position: 0 -267.5px;
  /* border:2.5px solid #e2e6e1;
  border-radius: 50%;
  color: #fff;
  font-weight: 700; */
}
.item .data .active {
  background-size: 19px 286.5px;
  background-position: 0 -116px;
}
.item img {
  float: left;
  width: 86px;
  height: 86px;
}
.item .desc {
  position: relative;
  float: left;
  margin-left: 10px;
  width: 221px;
  height: 86px;
}
.item .desc .name {
  position: absolute;
  top: 0;
  left: 0;
}
.item .desc .price {
  position: absolute;
  bottom: 0;
  left: 0;
}
.item .desc .selnum {
  position: absolute;
  bottom: 0;
  right: 0;
  border: 1px solid #d0d0d4;
}
</style>